import './index.scss'
import { Card, Form, Input, Button,DatePicker } from 'antd'
import logo from '@/assets/logo.png'
import dayjs from "dayjs";
import {useDispatch} from "react-redux";
import {fetchLogin, setToken} from "@/store/modules/user";

const Login = () => {
    const dispatch = useDispatch();
    const onFinish = async (values) => {
        console.log('onFinish', values)
        dispatch(fetchLogin(values));
    }



    return (
        <div className="login">
            <Card className="login-container">
                <img className="login-logo" src={logo} alt="" />
                {/* 登录表单 */}
                <Form onFinish={onFinish}>
                    <Form.Item label="Username"
                               name="mobile"
                               rules={[{ required: true, message: '请输入用户名' },
                                   {pattern:/^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[189]))\d{8}$/,message:'输入正确格式的手机号'}]}
                    validateTrigger={'onBlur'}>
                        <Input size="large" placeholder="请输入手机号" />
                    </Form.Item>
                    <Form.Item label="Password"
                               name="code"
                               rules={[{ required: true, message: '请输入密码' }]}>
                        <Input size="large" placeholder="请输入验证码" />
                    </Form.Item>
                    <Form.Item>
                        <Button type="primary" htmlType="submit" size="large" block>
                            登录
                        </Button>
                    </Form.Item>
                </Form>
            </Card>
        </div>
    )
}

export default Login